<template>
	<view class="focus">
		<view v-for="(item,index) in focusList" class="flex alignCenter justConBetween one" :key="index"
			@click="toHomePage(item)">
			<view class="flex alignCenter">
				<image
					:src="item.fansUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'"
					mode=""></image>
				<view class="hiddenOneline font14">{{item.fansUserName || '匿名用户'}}</view>
			</view>
			<view class="focusStyle" v-if="authorId==userId" @click.stop="focusClick(item)">取关</view>
		</view>
		<uni-nodata v-if="focusList.length==0" :iconStyle="{'margin':'100rpx 0 0'}"></uni-nodata>
	</view>
</template>

<script>
	import {
		focusFanList
	} from "@/api/mine.js"
	import {
		focusUser
	} from "@/api/index.js"
	export default {
		data() {
			return {
				focusList: [],
				popContent: '确定不再关注?',
				userId: '',
				page: 1,
				pageSize: 20,
				pageTotal: 0,
				authorId: ''
			};
		},
		onLoad(option) {
			this.authorId = uni.getStorageSync('userId')
			this.userId = option.userId ? option.userId : uni.getStorageSync('userId')
			this.getList()
		},
		methods: {
			initPage() {
				this.page = 1;
				this.focusList = []
			},
			getList() {
				let param = {
					page: this.page,
					size: this.pageSize,
					userId: this.userId,
					isFollowersView: true
				}
				focusFanList(param).then((res) => {
					if (res.code == 100000) {
						this.focusList = this.focusList.concat(res.data.rows)
						this.pageTotal = Math.ceil(res.data.total / this.pageSize)
					}
				})
			},
			focusClick(item) {
				uni.showModal({
					title: '提示',
					content: '确定不再关注？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							let param = {
								isAdd: false,
								fansUserId: item.fansUserId,
								fansUserName: item.fansUserName,
								fansUserAvatar: item.fansUserAvatar
							}
							focusUser(param).then((res) => {
								if (res.code == 100000) {
									this.initPage()
									this.getList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 去主页
			toHomePage(item) {
				uni.navigateTo({
					url: '/pages/mine/homePage/homePage?userId=' + item.fansUserId
				})
			},
		},
		onPullDownRefresh() {
			this.initPage()
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if (this.page < this.pageTotal) {
				++this.page
				this.getList()
			} else {
				uni.showToast({
					title: '我也是有底线的',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list-chat__content {
		align-items: center;
	}

	::v-deep .uni-list-chat__content-title {
		font-size: 32rpx;
	}

	::v-deep .uni-list-chat__header-image {
		margin: 0;
	}

	.focus {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.one {
		border-bottom: 1px solid $bordercolor;
		padding: 30rpx 0;

		image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.focusStyle {
			flex-shrink: 0;
		}
	}
</style>